<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>转盘2</title>
  </head>
  <body>
    <style>
      .box {
        width: 600px;
        height: 600px;
        background-color: #dea681;
        border-radius: 50%;
        margin: 30px auto;
        /* padding: 20px; */
        position: relative;
        overflow: hidden;
      }
      .lottery {
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        background-color: #977e7e;
        box-shadow: 0 0 15px #000;
      }
      .block {
        /* box-shadow: 0 0 1px #000 inset; */
        position: absolute;
        width: 300px;
        height: 300px;
        transform-origin: right bottom;
        -webkit-transform-origin: right bottom;
      }

      .block:nth-child(n + 4) {
        background-color: #fd5b78;
      }
      .block:nth-child(1) {
        transform: rotate(0deg) skewY(45deg);
      }
      .block:nth-child(2) {
        transform: rotate(45deg) skewY(45deg);
      }
      .block:nth-child(3) {
        transform: rotate(90deg) skewY(45deg);
      }
      .block:nth-child(4) {
        transform: rotate(135deg) skewY(45deg);
      }
      .block:nth-child(5) {
        transform: rotate(180deg) skewY(45deg);
      }
      .block:nth-child(6) {
        transform: rotate(225deg) skewY(45deg);
      }
      .block:nth-child(7) {
        transform: rotate(270deg) skewY(45deg);
      }
      .block:nth-child(8) {
        transform: rotate(315deg) skewY(45deg);
      }
      .content {
        width: 200px;
        height: 230px;
        transform-origin: center center 0;
        transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
        -webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      .content .img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
      }
      .content .none {
        width: 34px;
        height: 200px;
        margin: 0 auto;
        text-align: center;
        font-size: 34px;
        line-height: 200%;
        font-weight: bold;
      }
      .text {
        position: relative;
        height: 65px;
        text-align: justify;
        background-color: red;
        overflow: hidden;
        padding-right: 12px;
        /* display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5; */
      }
      .text::before {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        /* background-image: linear-gradient(to right, red, yellow 80%); */
      }
      /* .text::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), red 80%);
        position: absolute;
        right: 0;
        bottom: 0;
      } */
      .ga {
        /* position: absolute; */
        width: 40%;
        /* width: 50vw; */
        /* height: 50vw; */
        aspect-ratio: 16/9;
        background-color: rgba(255, 255, 25, 0.8);
        /* margin-left: 50px; */

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .inga {
        width: 100%;
        height: 100%;
      }
    </style>
    <div class="ga">
      <div class="inga">123123132</div>
    </div>
    <p class="text" draggable="true">
      高大上高大上高大上高大高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上高大上上高大上高大上高大上高大上高大上高大上高大上高大上
    </p>

    <hr />
    <div class="box">
      <div class="lottery">
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">1</div>
          </div>
        </div>
      </div>
    </div>

    <script>
      // let i = requestAnimationFrame(() => {
      //   console.log('requestAnimationFrame');
      // });
      // setTimeout(() => {
      //   console.log('setTimeout');
      // });
      // Number.isFinite(1);
      // console.log(Number.isFinite(0.1));
      // console.log(Number.isInteger(2));
      // const resizeObserver = new ResizeObserver(() => {});
      // console.log(resizeObserver);
      HD.prototype.init = function (options) {
        console.log(this, options);
      };
      function HD(options) {
        // this.name = 'vue';
        // console.log(this);
        this.init(options);
      }
      // let hd = new HD({ data: '1' });

      // console.dir(hd.constructor);
      // setTimeout(() => {
      //   console.log('setTimeout');
      // });
      // requestAnimationFrame(() => {
      //   console.log('requestAnimationFrame');
      // });

      let obj = {
        a: {
          b: {
            c: 777,
          },
        },
      };

      function fn(path, target) {
        const tempArray = path.split('.');
        let i = 0,
          len = tempArray.length;
        while (i < len) {
          target = target[tempArray[i]];
          i++;
        }
        console.log(target);
        return target;
      }

      fn('a.b.c', obj);

      let arr = [41, 2, 43, 24, 5, 1];

      const fastSort = (arr) => {
        arr = 888;
        // console.log(arr);
      };
      // console.log(arr);
      // 冒泡排序
      function bubbleSort(arr) {
        console.time('BubbleSort');
        // 获取数组长度，以确定循环次数。
        let len = arr.length;
        // 遍历数组len次，以确保数组被完全排序。
        for (let i = 0; i < len; i++) {
          // 遍历数组的前len-i项，忽略后面的i项（已排序部分）。
          for (let j = 0; j < len - 1 - i; j++) {
            let prev = arr[j],
              next = arr[j + 1],
              tmp = null;
            // 将每一项与后一项进行对比，不符合要求的就换位。
            if (prev > next) {
              // [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]];
              temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
            }
          }
        }
        console.timeEnd('BubbleSort');
        // return arr;
      }
      // bubbleSort(arr);
      // console.log(arr);
      // console.log(obj);
      // let a = 111;
      // let b = 222;
      // fastSort(a);
      // console.log(a);
      // let tmp = null;
      // tmp = a;
      // a = b;
      // b = tmp;
      // [b, a] = [a, b];
      // a = [b, (b = a)][0];
      // console.log('a' + a, 'b' + b);

      function Vue(name, age) {
        this.name = name;
        this.age = age;
        this.sing = function () {
          console.log('sing');
        };
      }
      Vue.prototype.set = function () {
        console.log('Vue set');
      };
      function Child(...args) {
        Vue.apply(this, args);
      }
      Child.prototype = Object.create(Vue.prototype);
      let c = new Child('llq', 20);
      // console.log(c);

      const setLocalStorage = (key, value) => {
        let data = localStorage.getItem('projectName');
        data = !data ? {} : JSON.parse(data);
        data[key] = value;
        localStorage.setItem('projectName', JSON.stringify(data));
      };
      const getLocalStorage = (key) => {
        let data = localStorage.getItem('projectName');
        if (!data) return null;
        data = JSON.parse(data);
        return data[key] || {};
      };

      //封装的本地存储
      class LocalStorage {
        //实例
        _instance = null;
        //设置该项目的本地存储名称
        projectName = null;
        // 本地存储数据
        #data = {};
        // 初始化统一的过期时间
        express = null;
        // 单例模式获取实例
        static Instance(projectName, express) {
          if (!this._instance) {
            return (this._instance = new LocalStorage(projectName, express));
          } else {
            return this._instance;
          }
        }
        constructor(projectName, express) {
          this.projectName = projectName;
          this.express = express;
          this.#data = localStorage.getItem(this.projectName);
          this.#data = this.#data ? JSON.parse(this.#data) : {};
        }

        /**
         * 设置本地存储ey
         * @param {*string} key 键
         * @param {*any} value 值
         * @param {*number|function} express 过期时间或回调函数
         * @param {*function} cb 回调函数
         */
        setValue(key, value, express, cb) {
          if (typeof express === 'function') [cb, express] = [express, cb];
          const cTime = Date.now();
          this.#data[key] = {
            cTime,
            value,
            express: express || this.express,
          };
          localStorage.setItem(this.projectName, JSON.stringify(this.#data));
          cb && cb.call(this, this);
        }
        /**
         * 获取本地存储ey
         * @param {*string} key 键
         * @param {*function} cb 回调函数
         */
        getValue(key, cb) {
          const nTime = Date.now();
          if (this.#data[key] && this.#data[key]?.express && this.#data[key].express < nTime - this.#data[key]?.cTime) {
            return this.#data[key];
            cb && cb.call(this, this);
          } else {
            delete this.#data[key];
            cb && cb.call(this, this);

            return null;
          }
        }
        /**
         * 删除本地存储ey
         * @param {*string} key 键
         * @param {*function} cb 回调函数
         */
        delValue(key, cb) {
          if (!key) {
            this.#data = {};
            localStorage.clear();
            cb && cb.call(this, this);

            return;
          }
          this.#data[key] && delete this.#data[key];
          cb && cb.call(this, this);
        }
      }
      // const instance = LocalStorage.Instance('projectName');
      // instance.setValue('age', 20, (e) => {
      //   console.log(e); // LocalStorage实例
      // });

      // console.log(0 ? 11 : 22 ? 33 : 44);

      // Object.defineProperties(obj, {
      //   ak: {
      //     get: function() {
      //       console.log(77);
      //       return 77;
      //     },
      //   },
      // });
      // obj.ak;
      // console.log(Object.getOwnPropertyDescriptor(obj, 'ak'));

      // async function returnPromise() {
      //   console.log(12);
      // }
      // returnPromise().then(function() {
      //   console.log(48445);
      // });
      // console.log(7);
      // Object.entries()
      // Object.fromEntities()

      const map = new Map([
        ['foo', 'bar'],
        ['baz', 42],
      ]);
      map.set('a', 1);
      const set = new Set([11, 22, 33]);
      set.add(55);

      // console.log(fr);
      // const obj1 = Object.fromEntries(map);
      // console.log(set);
      // console.log(Object.fromEntries(map));
      // console.log(Object.entries(obj1));
      // console.log(Object.keys(obj1));
      // console.log(Object.values(obj1));

      // console.log(Object.getOwnPropertyDescriptor(hjr, 'a'));
      // console.log(Object.getOwnPropertyNames(hjr));
      // console.log(Object.getOwnPropertySymbols(hjr));

      // console.log('a'.endsWith('a'));
      // console.log('a'.padStart(5, '*'));
      // console.log('a'.padEnd(5, '*'));

      // async function fn() {
      //   setTimeout(() => {
      //     console.log('setTimeout');
      //   });
      //   await console.log(999);
      //   console.log('async');
      // }
      // function test() {
      //   new Promise((resolve, reject) => {
      //     resolve();
      //     fn();
      //     console.log('Promise');
      //   }).then(() => {
      //     console.log('then');
      //   });
      //   console.log(777);
      // }
      // test();
      // new FileReader()
      const fd = new FormData();

      const filelist = [{ lable: 'gg', value: 'jj' }, 22, 33];

      for (let i = 0; i < filelist.length; i++) {
        const element = filelist[i];
        fd.append('img', JSON.stringify(element));
      }
      fd.append('img1', JSON.stringify({ age: 12 }));
      fd.append('img2', [789, 287]);
      fd.append('img3', 7);
      console.log(fd.getAll('img'));
      // console.log(fd.get('img'));
      // console.log(fd.get('img1'));-
      console.log(fd.get('img2'));
      console.log(fd.get('img3'));
      // let bv = /\.([\S\s]*)$/.exec('ca.dwg');
      // console.log(bv);
      // // let bvj = /\.dwg$/.test('gs.dwg');
      // // console.log(bvj);
      // console.log('gag.dwg'.match(/\.(dwg|cad)$/gi));

      // const arrr = [
      //   { id: 1, name: '办公费吧' },
      //   { id: 2, name: '遇见' },
      //   { id: 3, name: '他' },
      //   { id: 4, name: '他他人如果' },
      //   { id: 5, name: '发' },
      //   { id: 6, name: '色' },
      // ];

      // let nu = arrr
      //   .map((item) => {
      //     if (item.id !== 1) {
      //       return {
      //         ...item,
      //         desc: 789,
      //       };
      //     }
      //   })
      //   .filter(Boolean);
      // console.log(nu);
    </script>
  </body>
</html>
